<!--
 * @Author: gonghairun
 * @Date: 2020-11-19 10:16:14
 * @LastEditors: zhangzhanhua
 * @LastEditTime: 2021-06-16 08:46:59
 * @Description: //下拉框-开票
-->
<template>
    <div class="ticketSelect">
        <el-select
            v-if="dataType == 0"
            v-model="transportValue"
            v-loadmore="transportLoadMore"
            filterable
            size="mini"
            clearable
            remote
            class="others"
            reserve-keyword
            @change="transportChange"
            placeholder="船名航次"
            :remote-method="remoteMethodTransport"
            :loading="loading">
            <el-option
                v-for="(item,index) in transportList"
                :key="index"
                :label="item.shipNameVoyage"
                :value="item.id">
            </el-option>
        </el-select>
        <el-select
            v-if="dataType == 1"
            v-model="cargOwnerValue"
            v-loadmore="cargoOwnerLoadMore"
            filterable
            size="mini"
            clearable
            remote
            class="others"
            reserve-keyword
            @change="cargoOwnerChange"
            placeholder="货主"
            :remote-method="remoteMethodOwner"
            :loading="loading">
            <el-option
                v-for="(item,index) in cargOwner"
                :key="index"
                :label="item.fullName"
                :value="item.id">
            </el-option>
        </el-select>
        <el-select
            v-if="dataType == 2"
            v-model="cargoAgentValue"
            v-loadmore="cargoAgentLoadMore"
            filterable
            size="mini"
            clearable
            remote
            class="others"
            reserve-keyword
            @change="cargoAgentChange"
            placeholder="货代"
            :remote-method="remoteMethodAgent"
            :loading="loading">
            <el-option
                v-for="(item,index) in cargoAgent"
                :key="index"
                :label="item.fullName"
                :value="item.id">
            </el-option>
        </el-select>
        <el-select
            v-if="dataType == 3"
            v-loadmore="shipAgentLoadMore"
            v-model="shipAgentValue"
            filterable
            size="mini"
            clearable
            remote
            class="others"
            reserve-keyword
            @change="shipAgentChange"
            placeholder="船代"
            :remote-method="remoteMethodShipAgent"
            :loading="loading">
            <el-option
                v-for="(item,index) in shipAgentList"
                :key="index"
                :label="item.fullName"
                :value="item.id">
            </el-option>
        </el-select>
        <el-select
            v-if="dataType == 4"
            v-loadmore="cargoInfoLoadMore"
            v-model="cargoInfoValue"
            filterable
            size="mini"
            clearable
            remote
            class="others"
            reserve-keyword
            @change="cargoInfoChange"
            placeholder="货名"
            :remote-method="remoteMethodCargoInfo"
            :loading="loading">
            <el-option
                v-for="(item,index) in cargoInfoList"
                :key="index"
                :label="item.cargoInfoName"
                :value="item.cargoInfoCode">
            </el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    name: "ticketSelect",
    props:{
        // 类型
        dataType:{
            type:Number
        },
        // 船名默认值
        transportValue:{
            type:String
        },
        // 货主默认值
        cargOwnerValue:{
            type:String
        },
        // 货代默认值
        cargoAgentValue:{
            type:String
        },
        // 货代默认值
        shipAgentValue:{
            type:String
        },
        // 货名默认值
        cargoInfoValue:{
            type:[String,Array]
        },
        // 修改船名航次
        transportHandleChange:{
            type:Function
        },
        // 修改货主
        cargoOwnerHandleChange:{
            type:Function
        },
        // 修改货代
        cargoAgentHandleChange:{
            type:Function
        },
        // 修改船代
        shipAgentHandleChange:{
            type:Function
        },
        // 修改货名
        cargoInfoHandleChange:{
            type:Function
        },
    },
    components: {
    },
    data() {
        return {
            loading: false, // 下拉框加载状态
            pageNum:1, // 页面
            totalPageNum:'', // 总页数
            likeQuery:'', // 模糊查询
            cargOwner:[], // 货主数据
            transportList:[], // 船名航次
            shipAgentList:[], // 船代
            cargoAgent:[], // 货代
            cargoInfoList:[], // 货名
        }
    },
    created() {
        this.dataType == 0 ? this.getShipNameList('') : 
        this.dataType == 1 ? this.getCargOwner('') : 
        this.dataType == 2 ? this.getCargoAgent('') : 
        this.dataType == 3 ? this.getShipAgentList('') : 
        this.dataType == 4 ? this.getCargoInfoList('') : ''
    },
    watch: {
    },
    mounted() {
    },
    methods: {
        /**
         * @Author: gonghairun
         * @description: 获取船名航次下拉数据
         * @param {*}
         * @return {*}
         */
        getShipNameList(value) {
            var _this = this
            _this.$http.get(
                `/psys-business-service/api/external/protected/listship?status=401,501&keyword=${value}&startpage=${_this.pageNum}&pagesize=20`,
            ).then(res =>{
                let data = res.data.data.pages
                if(data){
                    _this.transportList = _this.transportList.concat(data)
                    _this.totalPageNum = res.data.data.totalPageNum
                }else{
                    _this.transportList = res.data.data
                }
               
            })
        },
        /**
         * @Author: gonghairun
         * @description: 船名航次-远程搜索
         * @param {*} query
         * @return {*}
         */
        remoteMethodTransport(query) {
            this.pageNum = 1
            this.likeQuery = query
            this.transportList = []
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.getShipNameList(query)
                }, 200);
            } else {
                this.getShipNameList('')
            }
        },
        /**
         * @Author: gonghairun
         * @description: 船名航次下拉加载
         * @param {*}
         * @return {*}
         */
        transportLoadMore() {
            this.pageNum++
            if (this.totalPageNum < this.pageNum) {
                return 
            }
            this.getShipNameList(this.likeQuery)
        },
        /**
         * @Author: gonghairun
         * @description: 修改船名航次
         * @param {*}
         * @return {*}
         */
        transportChange(value) {
            this.transportHandleChange(value)
        },
        /**
         * @Author: gonghairun
         * @description: 货主信息
         * @param {*} param
         * @param {*} id
         * @return {*}
         */
        getCargOwner(param) {
            this.$http.get(
                `/${this.$ServiceName}/api/external/protected/customer/listcompanybytype?customertype=02&keyword=${param}&id=${this.cargOwnerValue}&startpage=${this.pageNum}&pagesize=20`
            )
            .then((res) => {
                this.cargOwner = this.cargOwner.concat(res.data.data.pages)
                this.totalPageNum = res.data.data.totalPageNum
            })
        },
        /**
         * @Author: gonghairun
         * @description: 货主信息-模糊查询
         * @param {*} query
         * @return {*}
         */
        remoteMethodOwner(query) {
            this.pageNum = 1
            this.likeQuery = query
            this.cargOwner = []
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.getCargOwner(query)
                }, 200);
            } else {
                this.getCargOwner('')
            }
        },  
        /**
         * @Author: gonghairun
         * @description: 货主下拉加载
         * @param {*}
         * @return {*}
         */
        cargoOwnerLoadMore() {
            this.pageNum++
            if (this.totalPageNum < this.pageNum) {
                return 
            }
            this.getCargOwner(this.likeQuery)
        },
        /**
         * @Author: gonghairun
         * @description: 修改货主
         * @param {*}
         * @return {*}
         */
        cargoOwnerChange(value) {
            this.cargoOwnerHandleChange(value)
        },
        /**
         * @Author: gonghairun
         * @description: 获取货代信息
         * @param {*} param
         * @param {*} id
         * @return {*}
         */
        getCargoAgent(param) {
            this.$http.get(
                `/${this.$ServiceName}/api/external/protected/customer/listcompanybytype?customertype=01&keyword=${param}&id=${this.cargoAgentValue}&startpage=${this.pageNum}&pagesize=20`
            )
            .then((res) => {
                this.cargoAgent = this.cargoAgent.concat(res.data.data.pages)
                this.totalPageNum = res.data.data.totalPageNum
            })
        },
        /**
         * @Author: gonghairun
         * @description: 
         * @param {*} query
         * @return {*}
         */
        remoteMethodAgent(query) {
            this.pageNum = 1
            this.totalPageNum = query
            this.cargoAgent = []
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.getCargoAgent(query)
                }, 200);
            } else {
                this.getCargoAgent('')
            }
        },
        /**
         * @Author: gonghairun
         * @description: 货代下拉加载
         * @param {*}
         * @return {*}
         */
        cargoAgentLoadMore() {
            this.pageNum++
            if (this.totalPageNum < this.pageNum) {
                return 
            }
            this.getCargoAgent(this.likeQuery)
        },
        /**
         * @Author: gonghairun
         * @description: 修改货代
         * @param {*}
         * @return {*}
         */
        cargoAgentChange(value) {
            this.cargoAgentHandleChange(value)
        },
        /**
         * @Author: gonghairun
         * @description: 获取船代下拉数据
         * @param {*}
         * @return {*}
         */
        getShipAgentList(keyword='') {
            var _this = this
            _this.$http.get(
                `/${this.$ServiceName}/api/external/protected/customer/listcompanybytype?customertype=03&keyword=${keyword}&startpage=${_this.pageNum}&pagesize=20`,
            ).then(res =>{
                _this.shipAgentList = _this.shipAgentList.concat(res.data.data.pages)
                _this.totalPageNum = res.data.data.totalPageNum
            })
        },
        /**
         * @Author: gonghairun
         * @description: 船代-模糊查询
         * @param {*} query
         * @return {*}
         */
        remoteMethodShipAgent(query) {
            this.pageNum = 1
            this.totalPageNum = query
            this.shipAgentList = []
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.getShipAgentList(query)
                }, 200);
            } else {
                this.getShipAgentList('')
            }
        },
        /**
         * @Author: gonghairun
         * @description: 船代下拉加载
         * @param {*}
         * @return {*}
         */
        shipAgentLoadMore() {
            this.pageNum++
            if (this.totalPageNum < this.pageNum) {
                return 
            }
            this.getShipAgentList(this.likeQuery)
        },
        /**
         * @Author: gonghairun
         * @description: 修改船代
         * @param {*}
         * @return {*}
         */
        shipAgentChange(value) {
            this.shipAgentHandleChange(value)
        },
        /**
         * @Author: gonghairun
         * @description: 获取货名下拉数据
         * @param {*}
         * @return {*}
         */
        getCargoInfoList(keyword) {
            var _this = this
            _this.$http.get(
                `/${this.$ServiceName}/api/external/protected/company/listcargoinfoname?keyword=${keyword}&code=${_this.cargoInfoValue}&startpage=${_this.pageNum}&pagesize=20`,
            ).then(res =>{
                _this.cargoInfoList = _this.cargoInfoList.concat(res.data.data.pages)
                _this.totalPageNum = res.data.data.totalPageNum
            })
        },
        /**
         * @Author: gonghairun
         * @description: 货名-模糊查询
         * @param {*} query
         * @return {*}
         */
        remoteMethodCargoInfo(query) {
            this.pageNum = 1
            this.totalPageNum = query
            this.cargoInfoList = []
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.getCargoInfoList(query)
                }, 200);
            } else {
                this.getCargoInfoList('')
            }
        },
        /**
         * @Author: gonghairun
         * @description: 货名下拉加载
         * @param {*}
         * @return {*}
         */
        cargoInfoLoadMore() {
            this.pageNum++
            if (this.totalPageNum < this.pageNum) {
                return 
            }
            this.getCargoInfoList(this.likeQuery)
        },
        /**
         * @Author: gonghairun
         * @description: 修改货名
         * @param {*}
         * @return {*}
         */
        cargoInfoChange(value) {
            this.cargoInfoHandleChange(value)
        },
    }
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
